<template>
	<div>
		<el-form :model="formData" label-width="120px" :rules="rules" ref="applyformAddRef">
<!-- 			<el-row>
				<el-col :span="6">
					<el-form-item label="数据年份">
						<el-date-picker type="year" v-model="formData.fina.SettlementNumber" value-format="yyyy"  :disabled="!formData.fina.FinanceReimbursementStart==0"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="是否扎帐">
						<el-radio-group v-model="formData.fina.Settlement"  :disabled="!formData.fina.FinanceReimbursementStart==0">
							<el-radio :label="true">是</el-radio>
							<el-radio :label="false">否</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row> -->
<!-- 			<el-row>
				<el-col :span="6">
					<el-form-item label="年度开账">
						<el-radio-group v-model="formData.fina.Settlement" @input="radioEvent"  :disabled="!formData.fina.FinanceReimbursementStart==0">
							<el-radio :label="true">是</el-radio>
							<el-radio :label="false">否</el-radio>
						</el-radio-group> 
					</el-form-item>
				</el-col>				
				<el-col :span="6"  v-show="formData.fina.Settlement">
					<el-form-item label="数据年份">
						<el-date-picker type="year" v-model="formData.fina.SettlementNumber" value-format="yyyy" @change="SettlementNumberEvent"  :disabled="!formData.fina.FinanceReimbursementStart==0"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="CheckSettlementResult.StatusCode==500 && CheckSettlementResult.Message!=''">
				<el-col :span="24">
					<el-form-item label="提示:">
						<p style="color: #E6A23C;margin: 0px 0px;">{{ CheckSettlementResult.Message }}</p> 
					</el-form-item>
				</el-col>
			</el-row> -->
			<el-form-item label="项目名称">
				<el-input v-model="project.ProjectName" disabled></el-input>
			</el-form-item>
			<el-row>
				<el-col :span="6">
					<el-form-item label="工单编号" prop="ReimNumber">
						<el-input v-model="formData.fina.ReimNumber"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="报销类别" prop="FinanceReimbursementReimType">
						<el-select v-model="formData.fina.FinanceReimbursementReimType" style="width: 100%;" :disabled="!formData.fina.FinanceReimbursementStart==0">
							<el-option v-for="(item,index) in $parent.$parent.ResEnum" :value="item.Value"
								:label="item.Description"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="申报人" prop="UserId"> 
						<el-select v-model="formData.fina.UserId" style="width: 100%;"  :disabled="!formData.fina.FinanceReimbursementStart==0">
							<el-option v-for="(item,index) in $store.state.AllUsers" :value="item.Id"
								:label="item.UserName" v-if="item.RoleId != '1'"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="申报时间" prop="BorrowTime">
						<el-date-picker style="width: 99%;" v-model="formData.fina.BorrowTime" value-format="yyyy-MM-dd HH:mm:ss" :disabled="!formData.fina.FinanceReimbursementStart==0"
							placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="申报金额" prop="Mony">
						<el-input v-model="formData.Mony" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24">
					<el-form-item label="报销内容" prop="Content">
						<el-input v-model="formData.Content" type="textarea" :disabled="!formData.fina.FinanceReimbursementStart==0"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="摘要" prop="Abstract">
						<el-input v-model="formData.Abstract" type="textarea" :disabled="!formData.fina.FinanceReimbursementStart==0"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="3">
					<el-form-item label="附件上传">
						<UploadFileF ref="AnotherData" :multiple="true" :another-data="AnotherData" v-show="formData.fina.FinanceReimbursementStart==0" listtype="picture" 
							:showfilelist="true" :upshow="false" content="上传附件文件" btnsize="medium"></UploadFileF>
					</el-form-item>
				</el-col>
				<el-col :span="3" style="margin-left:20px;">
					<el-form-item label="已上传文件">
						<el-button type="success" @click="PreviewImageEvent()">预览</el-button>		
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24">
					<el-button type="primary" icon="el-icon-plus" size="mini" @click="addDetaliEvent()"  :disabled="!formData.fina.FinanceReimbursementStart==0">添加明细</el-button>
					<el-popover v-model="approvevisible" placement="top" :width="180" style="margin-left: 10px;">
						<p>你确定要审批你的选择吗?</p>
						<div style="display: flex;justify-content: flex-end;">
							<el-button size="small" text @click="approvevisible = false">取消</el-button>
							<el-button size="small" type="primary" @click="UpHDFinanceReimbursementHandle(true)">确定</el-button>
						</div>
						<el-button type="primary" icon="el-icon-s-check" v-show="$store.state.user.roleid == 1" slot="reference"  size="mini" @click="approvevisibleEvent()" :disabled="!formData.fina.FinanceReimbursementStart==0">审批</el-button>
					</el-popover>
					<el-table :data="reimRuleList" style="width: 100%;" ref="multipleTable" @select="tableSelectEvent" @select-all="tableSelectEvent"
						:cell-style="{ padding: '5px 0 ' }">
						<el-table-column type="selection" width="42" align="center" :selectable="selectableEvent"></el-table-column>
						<el-table-column header-align="center" fixed prop="ReimRuleContent" label="报销内容" align="center">
							<template slot-scope="scope">
								<el-input type="textarea" autosize v-model="scope.row.ReimRuleContent" v-if="scope.row.FinanceReimbursementStart==0"></el-input>
								<p v-else>{{ scope.row.ReimRuleContent }}</p>
							</template>
						</el-table-column>
						<el-table-column header-align="center" fixed prop="Abstract" label="内容摘要" align="center">
							<template slot-scope="scope">
								<el-input type="textarea" autosize v-model="scope.row.Abstract" v-if="scope.row.FinanceReimbursementStart==0"></el-input>
								<p v-else>{{ scope.row.Abstract }}</p>
							</template>
						</el-table-column>
						<el-table-column header-align="center" fixed prop="ReimRuleCertificate" label="报销凭证"
							align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.ReimRuleCertificate" v-if="scope.row.FinanceReimbursementStart==0"></el-input>
								<p v-else>{{ scope.row.ReimRuleCertificate }}</p>
							</template>
						</el-table-column>
						<el-table-column header-align="center" fixed prop="ReimRuleMoney" label="金额" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.ReimRuleMoney" v-if="scope.row.FinanceReimbursementStart==0" @blur="moneyEvent(scope.row)"></el-input>
								<p v-else>{{ scope.row.ReimRuleMoney }}</p>
							</template>
						</el-table-column>
						<el-table-column header-align="center" fixed prop="FinanceReimbursementStart" label="审批状态" align="center">
							<template slot-scope="scope">
								<p v-if="scope.row.FinanceReimbursementStart == 0" style="color: #E6A23C;">待审批</p>
								<p v-else  style="color: #67C23A;">已审批</p>
							</template>
						</el-table-column>
						<el-table-column header-align="center" fixed prop="Remark" label="备注" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.Remark" v-if="scope.row.FinanceReimbursementStart==0"></el-input>
								<p v-else>{{ scope.row.Remark }}</p>
							</template>
						</el-table-column>
						<el-table-column header-align="center" prop="UserNumber" align="center" label="操作"
							width="120px">
							<template slot-scope="scope">
								<el-button type="text" plain size="mini" style="color: #F56C6C;"
									@click="tableHandler(scope.$index,scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24" align="right">
					<el-button type="primary" @click="UpHDFinanceReimbursementHandle(false)"  :disabled="!formData.fina.FinanceReimbursementStart==0">保存</el-button>
				</el-col>
			</el-row>
		</el-form>
		
		<el-image-viewer v-if="showViewer" :on-close="() => { showViewer = false }" :url-list="imgArray" style="z-index: 300000;"/>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import UploadFileF from "../../UploadFileF";
	import { CheckAmount,GetAllFileByUrl } from "../../../../public/Scriput/Public.js"
	export default {
		components:{
			UploadFileF,
			'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
		},
		props: {
			project: {
				type: Object,
				required: false
			},
			closeFun: {
				type: Function,
				reuqired: false,
			},
			ApplyDetalis: {
				type: Object,
				required: false
			},
		},
		data() {
			var priceRule = (rule, value, callback) =>{
				if(value == '') callback(new Error('请输入申报金额'))
				else if(!CheckAmount(value)) callback(new Error('请填写有效的申报金额(保留两位小数)'))
				else callback()
			};
			return {
				formData: {},
				reimRuleList: [],
				projectUserList: [],
				selectDetails: [],
				rules: {
					reimType: [{
						required: true,
						message: '请选择报销类型',
						trigger: 'change'
					}],
					borrower: [{
						required: true,
						message: '请选择申报人',
						trigger: 'change'
					}],
					borrowTime: [{
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					content: [{
						required: true,
						message: '请填写申报金额',
						trigger: 'blur'
					}],
				},
				approvevisible:false,
				AnotherData: {
					//项目模块
					FileType: 512,
					//项目Id号
					id: 0,
					//Type：1：收方工资单  2、应发工资单、3报销单 
					Type: 3,
					Single: false,
				},
				CheckSettlementResult:{
					Status: false,
					StatusCode:200,
				},
				//图片预览集合
				imgArray:[],
				showViewer:false,
			}
		},
		created() {
			this.getPorjectUsers()
		},
		watch:{
			'ApplyDetalis.fina.Id':{
				handler(value){
					this.formData = this.ApplyDetalis
					this.SelHDFinanceReimbursementInfo(value)
				},
				immediate:true,
				deep:true,
			}
		},
		mounted() {

		},
		methods: {
			//新建明细
			addDetaliEvent() {
				this.reimRuleList.push({
					ReimRuleMoney: 0,
					ReimRuleContent: "",
					Abstract: "",
					ReimRuleCertificate: "",
					Remark: "",
					FinanceReimbursementStart: 0,
					FinanceReimbursementId: this.formData.fina.Id
				})
			},
			//表格操作
			tableHandler(index, row) {
				this.$http.post('NewFinanceReimbursementReim/DelReimRule',{ id: row.Id }).then(res=>{
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if(StatusCode == 200) {
						this.reimRuleList.splice(index, 1)
						this.$message.success('删除成功!')
					}else {
						this.$message.warning(Message)
					}
				})
			},
			//修改财务报销报表
			UpHDFinanceReimbursementHandle(isApproval) {
				let _this = this
				if(isApproval &&  this.selectDetails.length == 0){
					this.$message.warning('请选择需要审批的数据!')
				}else{
					this.$refs.applyformAddRef.validate((valid) => {
						if (valid) {
							let newReimRuleList = _this.reimRuleList.map(x=>{
								return { ...x }
							})
							//是否审核
							if(isApproval)
							{
								this.selectDetails.forEach(x=>{
									let index = this.reimRuleList.findIndex(r=>r.Id == x.Id)
									newReimRuleList[index].FinanceReimbursementStart = 1
								})									
							}
							_this.$http.post('NewFinanceReimbursementReim/UpHDFinanceReimbursement', {
								UpOrAudit: isApproval?1:0,
								financeReimbursementReim: _this.formData.fina,
								reimRules: newReimRuleList
							}).then(res => {
								const {
									StatusCode,
									Data,
									Message
								} = res.data || 0
								if (StatusCode == 200) {
									if(isApproval){
										_this.$message.success('审批成功')
										_this.SelHDFinanceReimbursementInfo(_this.formData.fina.Id)
									}else{	
										if (this.$refs['AnotherData'].fileList.length > 0) {
											_this.AnotherData.id = _this.formData.fina.Id;
											this.$refs['AnotherData'].submitUpload()
										}
										_this.$message.success('修改成功')
									}
									_this.closeFun()
								}else{
									_this.$message.warning(Message)
								}
							})
						}
					})					
				}
			},
			//获取项目下的人员
			getPorjectUsers() {
				this.projectUserList = []
				let {
					UserIds
				} = this.project || ''
				let ids = UserIds.split(',')
				ids.forEach(x => {
					let user = this.$store.state.AllUsers.find(u => u.Id == x) || undefined
					if (user != undefined) this.projectUserList.push(user)
				})
			},
			//获取详情
			SelHDFinanceReimbursementInfo(id){
				let _this = this
				this.$http.post('NewFinanceReimbursementReim/SelHDFinanceReimbursementInfo',{
					id:id
				}).then(res=>{
					const {
						StatusCode,
						Data
					} = res.data || 0
					if(StatusCode == 200){
						this.reimRuleList = Data
						_this.$nextTick(()=>{
							_this.$refs.multipleTable.toggleAllSelection()
						})	
					}else{
						this.reimRuleList = []
					} 
				})
			},
			//审批弹框
			approvevisibleEvent(){				
				if(this.selectDetails.length == 0){
					this.$message.warning('请选择需要审批的数据!')
				}else{
					this.approvevisible = true
				}
			},
			//表格选中
			tableSelectEvent(value,select){
				// value.forEach(x=>{
				// 	let index = this.reimRuleList.findIndex(r=>r.Id == x.Id)
				// 	this.reimRuleList[index].FinanceReimbursementStart = 1
				// })
				this.selectDetails = value
			},
			//表格禁选
			selectableEvent(row,index){
				return row.FinanceReimbursementStart == 1?false:true
			},
			//价格计算
			moneyEvent(row){
				if(!CheckAmount(row.ReimRuleMoney)){
					row.ReimRuleMoney = ''
					this.$message.warning('请填写有效的申报金额(保留两位小数)')
				}else{
					this.formData.Mony = (this.reimRuleList.reduce((prev, curr)=>{
						const { ReimRuleMoney } = curr || 0
						let num = ReimRuleMoney == ''?0:Number(ReimRuleMoney)
						return prev + num
					},0)).toFixed(2)				
				}
			},
			//项目是否完结
			projectOver(){
				const { EndDate } = this.project || ''
				if(EndDate == undefined || EndDate == '') {
					return false
				}else{
					let chazhi = dayjs(EndDate).diff(Date(),'day')
					return chazhi<0 ? true:false
				}
			},
			//是否扎帐
			radioEvent(value){
				if(!value) this.formData.SettlementNumber = ''
			},
			//时间选择事件
			SettlementNumberEvent(value) {
				if (value == '') return
				this.$http.post('NewFinanceReimbursementReim/CheckSettlement', {
					settlementNumber: value,
					projectId: this.project.Id
				}).then(res => {
					this.CheckSettlementResult = res.data
				})
			},
			//修改已经扎帐订单,请谨慎操作
			IsUpSettlementHandler(){
				//不存在已扎帐
				if(this.CheckSettlementResult.StatusCode == 200){
					this.UpHDFinanceReimbursementHandle(false)
				}else{
					//存在已扎帐,修改原数据
					this.$http.post('NewFinanceReimbursementReim/UpSettlement', {
						settlementNumber: this.formData.fina.SettlementNumber,
						projectId: 0
					}).then(res => {
						const {
							StatusCode,
							Data,
							Message
						} = res.data || 0
						if (StatusCode == 200){
							this.UpHDFinanceReimbursementHandle(false)
						}else{
							this.$message.warning(Message)
						}
					})					
				}
			},
			//预览图片
			async PreviewImageEvent(row){
				let Data = {
					id: this.formData.fina.Id || this.formData.fina.id,
					FileType: 512,
					Type: 3,
					FileName: '',
				}
				let path = Data.FileType +','+ Data.id +','+ Data.Type
				let BasePath = this.$BasePath.substring(0,this.$BasePath.length-1)
				//文件下载
				let imgArray = await GetAllFileByUrl(this.$http,path)
				if(imgArray.length>0){
					this.imgArray = imgArray.map(x=>{ return BasePath + x})		
					this.showViewer = true
				}else{
					this.$message.warning('暂无上传图片文件!')
					this.showViewer = false
				}
			},
			//清空表单数据
			clearFormData(){
				this.$refs.AnotherData.clearfilelist()
			},
		},
	}
</script>

<style scoped>
</style>